{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Basic example for python-highcharts\n",
    "====================\n",
    "\n",
    "All datasets need to input using \"add_data_set\" method\n",
    "Highchart options can be either set by \"set_options\" method as showing here or\n",
    "construct a option dictionary object and input using \"set_dict_options\" method"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "from highcharts import Highchart # import highchart library\n",
    "H = Highchart() # setup highchart instance\n",
    "\n",
    "data = list(range(1,20))\n",
    "data2 = list(range(20,1,-1)) # generate some random datasets"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {
    "collapsed": false
   },
   "source": [
    "Each dataset needs to input using add_data_set and add_data_from_jsonp (not recommended) methods\n",
    "\n",
    "1. add_data_set(data, series_type=\"line\", name=None, **kwargs)\n",
    "    1. data is the dataset for chart \n",
    "    2. series_type (default: \"line\") is the type of plot this dataset will be presented \n",
    "    3. name is the variable name of dateset(default: Series X) used in python\n",
    "    4. kwargs are for parameters in series or plotOptions \n",
    "        (for detail please ref to highcharts API: http://api.highcharts.com/highcharts#)\n",
    "\n",
    "2. add_data_from_jsonp(data_src, data_name='json_data', series_type=\"line\", name=None, **kwargs)\n",
    "    add dataset from the data_src using jsonp. It is converted to jquery function \"$.getJSON\" in javascript environment\n",
    "    1. data_src is the url (https) for the dataset\n",
    "    2. data_name is the variable name of dataset. This name is used for javascript environment (not in python)\n",
    "    3. series_type( default: \"line\") is the type of plot this dataset will be presented\n",
    "    4. kwargs are for parameters in series or plotOptions \n",
    "        (for detail please ref to highcharts API: http://api.highcharts.com/highcharts#)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "H.add_data_set(data2,'line')\n",
    "H.add_data_set(data, 'line', \n",
    "    marker={\n",
    "        'states': {\n",
    "            'hover': {\n",
    "                'enabled': True, \n",
    "                'fillColor': 'white', \n",
    "                'lineColor': 'red',\n",
    "                'lineWidth': 2\n",
    "            }\n",
    "        }\n",
    "    },\n",
    "    events={\n",
    "        'click': \"function (event) { alert(this.name + ' clicked\\\\n' + 'Alt: ' + event.altKey + '\\\\n' + \\\n",
    "                 'Control: ' + event.ctrlKey + '\\\\n' + 'Shift: ' + event.shiftKey + '\\\\n');}\"}, \n",
    "    dashStyle='ShortDash'\n",
    ")"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Set up highchart options using \n",
    "* set_options method:  \n",
    "    set_options(option_type, option_dict)\n",
    "    option_type is the keyword for highchart options\n",
    "    option_dict is (python) dict for option settings\n",
    "    (for option details please ref to highcharts API: http://api.highcharts.com/highcharts#)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {
    "collapsed": true
   },
   "outputs": [],
   "source": [
    "H.set_options('chart', {'resetZoomButton': {'relativeTo': 'plot', 'position': {'x': 0, 'y': -30}}})\n",
    "H.set_options('xAxis', {'events': {'afterBreaks': 'function(e){return}'}})\n",
    "H.set_options('tooltip', {'formatter': 'default_tooltip'})\n",
    "H.set_options('xAxis', {'events': {'pointBreak': 'function(e){return}'}})\n",
    "H.set_options('chart', {'style': {'fontFamily': 'Lucida Grande, sans-serif', \"fontfontSize\": '12px'}})\n",
    "H.set_options('chart', {'style': {\"fontfontSize\": '22px'}})\n",
    "H.set_options('chart', {'resetZoomButton': {'position': {'x': 10}}})\n",
    "H.set_options('chart', {'resetZoomButton': {'relativeTo': 'chart'}})"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Set up highchart options using \n",
    "*  set_dict_options method: \n",
    "    set_dict_options(options)\n",
    "    option is a (python) dict for options settings\n",
    "\n",
    "The way to use this method is very similar to the options object as on highcharts docs:\n",
    "http://www.highcharts.com/docs/getting-started/how-to-set-options\n",
    "1. construct option (python) dict similar to the option object in javascript\n",
    "2. input option dict using set_dict_options\n",
    "(for all the option details please ref to highcharts API: http://api.highcharts.com/highcharts#)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {
    "collapsed": false
   },
   "outputs": [
    {
     "data": {
      "text/html": [
       "<iframe style=\"border:0;outline:none;overflow:hidden\" srcdoc=\"&lt;!DOCTYPE html&gt;\n",
       "&lt;html lang=&quot;en&quot;&gt;\n",
       "    &lt;head&gt;\n",
       "        &lt;meta charset=&quot;utf-8&quot; /&gt;\n",
       "        &lt;link href=&quot;https://www.highcharts.com/highslide/highslide.css&quot; rel=&quot;stylesheet&quot; /&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/highcharts-more.js&quot;&gt;&lt;/script&gt;\n",
       "        &lt;script type=&quot;text/javascript&quot; src=&quot;https://code.highcharts.com/modules/exporting.js&quot;&gt;&lt;/script&gt;\n",
       "    &lt;/head&gt;\n",
       "    &lt;body style=&quot;margin:0;padding:0&quot;&gt;\n",
       "                &lt;div id=&quot;container&quot; style=&quot;&quot;&gt;Loading....&lt;/div&gt;\n",
       "\n",
       "\n",
       "    &lt;script&gt;\n",
       "        $(function(){\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "\n",
       "\n",
       "            Highcharts.setOptions({&quot;lang&quot;: {}, &quot;global&quot;: {}});\n",
       "            var option = {&quot;loading&quot;: {}, &quot;subtitle&quot;: {}, &quot;xAxis&quot;: {&quot;plotBands&quot;: [{&quot;color&quot;: &quot;#FCFFC5&quot;, &quot;to&quot;: 4, &quot;from&quot;: 2}, {&quot;color&quot;: &quot;#FCFFC5&quot;, &quot;to&quot;: 8, &quot;from&quot;: 6}, {&quot;color&quot;: &quot;#FCFFC5&quot;, &quot;to&quot;: 12, &quot;from&quot;: 10}], &quot;events&quot;: {&quot;afterBreaks&quot;: function(e){return}, &quot;pointBreak&quot;: function(e){return}}}, &quot;title&quot;: {&quot;text&quot;: &quot;A New Highchart&quot;}, &quot;series&quot;: {}, &quot;labels&quot;: {}, &quot;yAxis&quot;: {}, &quot;chart&quot;: {&quot;style&quot;: {&quot;fontFamily&quot;: &quot;Lucida Grande, sans-serif&quot;, &quot;fontfontSize&quot;: &quot;22px&quot;}, &quot;renderTo&quot;: &quot;container&quot;, &quot;resetZoomButton&quot;: {&quot;relativeTo&quot;: &quot;chart&quot;, &quot;position&quot;: {&quot;y&quot;: -30, &quot;x&quot;: 10}}}, &quot;tooltip&quot;: {&quot;formatter&quot;: function () { return&#x27;&lt;b&gt;&#x27;+ this.series.name + &#x27;&lt;/b&gt;: &#x27; + this.y; }}, &quot;plotOptions&quot;: {}, &quot;credits&quot;: {&quot;enabled&quot;: false}, &quot;colors&quot;: {}, &quot;pane&quot;: {}, &quot;exporting&quot;: {}, &quot;drilldown&quot;: {}, &quot;navigation&quot;: {}, &quot;legend&quot;: {}};\n",
       "\n",
       "\n",
       "            var data = [{&quot;data&quot;: [20, 19, 18, 17, 16, 15, 14, 13, 12, 11, 10, 9, 8, 7, 6, 5, 4, 3, 2], &quot;type&quot;: &quot;line&quot;, &quot;name&quot;: &quot;Series 1&quot;}, {&quot;dashStyle&quot;: &quot;ShortDash&quot;, &quot;name&quot;: &quot;Series 2&quot;, &quot;type&quot;: &quot;line&quot;, &quot;marker&quot;: {&quot;states&quot;: {&quot;hover&quot;: {&quot;lineWidth&quot;: 2, &quot;enabled&quot;: true, &quot;fillColor&quot;: &quot;white&quot;, &quot;lineColor&quot;: &quot;red&quot;}}}, &quot;data&quot;: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19], &quot;events&quot;: {&quot;click&quot;: function (event) { alert(this.name + &#x27; clicked\\n&#x27; + &#x27;Alt: &#x27; + event.altKey + &#x27;\\n&#x27; +                  &#x27;Control: &#x27; + event.ctrlKey + &#x27;\\n&#x27; + &#x27;Shift: &#x27; + event.shiftKey + &#x27;\\n&#x27;);}}}];\n",
       "            option.series = data;\n",
       "\n",
       " \n",
       "\n",
       "            var chart = new Highcharts.Chart(option);\n",
       "\n",
       "\n",
       "\n",
       "\n",
       "\n",
       " \n",
       "\n",
       "\n",
       "        \n",
       "    });\n",
       "        &lt;/script&gt;\n",
       "\n",
       "    &lt;/body&gt;\n",
       "&lt;/html&gt; \"height= 520 width = 820></iframe>"
      ],
      "text/plain": [
       "<highcharts.highcharts.highcharts.Highchart at 0x7fe8b4bb3350>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "options = {\n",
    "    'xAxis':{\n",
    "        'plotBands': \n",
    "            [{'color': '#FCFFC5', 'from': 2, 'to': 4}, \n",
    "            {'color': '#FCFFC5', 'from': 6, 'to': 8},\n",
    "            {'color': '#FCFFC5', 'from': 10, 'to': 12}]\n",
    "        }\n",
    "}\n",
    "H.set_dict_options(options) # input option object using set_dict_options method\n",
    "\n",
    "H # show the chart on ipython "
   ]
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 2",
   "language": "python",
   "name": "python2"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 2
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython2",
   "version": "2.7.6"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 0
}
